<template>
  <div class="containter">
    <div class="step">
      <ol class="titt">
        <el-badge
          :value="item.num"
          :max="99"
          :hidden="item.num == 0 || item.num == 'a'"
          class="item tittItem"
          v-for="(item, index) in list"
          :key="index"
        >
          <el-button
            class="button"
            size="mini"
            :class="activeIndex == index ? 'cur' : ''"
            :disabled="item.num == 0"
            @click="goAssignBlock('panelRef' + index, 100, index)"
          >{{ item.text }}</el-button>
        </el-badge>
      </ol>
    </div>

    <div
      ref="panelRef0"
      class="basicInfo basicInfo0"
    >
      <p class="title"><span>案件分析</span></p>
      <div id="trend"></div>
    </div>
    <div
      ref="panelRef1"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>法院公告信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="courtList"
        style="width: 100%"
        v-loading="courtLoading"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="annoer"
          label="公告人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="lawername"
          label="当事人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="annotpye"
          label="公告类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="正文内容"
          width="300"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="annodate"
          label="公告时间"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef2"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>开庭公告信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="openList"
        style="width: 100%"
        v-loading="openLoading"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="referenceno"
          label="案号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="party"
          label="当事人"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="accuser"
          label="原告"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="defendant"
          label="被告"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="brief"
          label="案由"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="courtdate"
          label="开庭日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="court"
          label="法院"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef3"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>裁判文书信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="judicativePaperList"
        style="width: 100%"
        v-loading="loading1"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="caseno"
          label="案件编号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="casename"
          label="案件名称"
          width="200"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <!-- <el-table-column prop="type" label="案件分类"  align="center"></el-table-column> -->
        <el-table-column
          prop="court"
          label="执行法院"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="trialround"
          label="审理程序"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="judgedate"
          label="裁判时间"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{
              row.judgedate ? row.judgedate.slice(0, 10) : row.judgedate
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef4"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>失信被执行人信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="dishonestyList"
        style="width: 100%"
        v-loading="loading3"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="executeno"
          label="案件编号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="yiwu"
          label="失信被执行人行为具体情形"
          width="300"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="executestatus"
          label="被执行人履行情况"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="executegov"
          label="执行法院"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="liandate"
          label="立案日期"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{
              row.liandate ? row.liandate.slice(0, 10) : row.liandate
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="pubDate"
          label="发布时间"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{
              row.pubDate ? row.pubDate.slice(0, 10) : row.pubDate
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef5"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>行政处罚信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="administrativePenaltyList"
        style="width: 100%"
        v-loading="loading4"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="xzcfjdws"
          label="决定书文号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <!-- <el-table-column prop="wflx" label="违法行为类型"  align="center"></el-table-column> -->
        <el-table-column
          prop="cfnr"
          label="处罚内容"
          width="300"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cfjdrq"
          label="处罚决定日期"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cfjg"
          label="决定机关"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
    </div>
    <div
      ref="panelRef6"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>行政强制信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="administrativePenaltyList"
        style="width: 100%"
        v-loading="loading4"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="executeno"
          label="行政强制决定文书名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="yiwu"
          label="行政强制种类"
          width="300"
          :show-overflow-tooltip="true"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="executestatus"
          label="行政强制理由"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="executegov"
          label="行政强制内容"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="liandate" label="实施强制措施起始时间" align="center">
        </el-table-column>
        <el-table-column prop="pubDate" label="实施强制措施结束时间" align="center">
        </el-table-column>
      </el-table>
    </div>
    <!-- 信用承诺 -->
    <div
      ref="panelRef7"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>信用承诺</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="xycnDataList"
        style="width: 100%"
        v-loading="loadingXycn"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="cnlx"
          label="承诺类型"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cnnr"
          label="承诺内容"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          prop="wnzr"
          label="违诺责任"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="cnlxzt"
          label="承诺履行状态"
          align="center"
          show-overflow-tooltip
        />
      </el-table>
    </div>
    <!-- 破产案件信息 -->
    <div
      ref="panelRef8"
      class="basicInfo basicInfo1"
    >
      <p class="title">
        <span>破产案件信息</span><span class="glqy">查看更多信息>></span>
      </p>
      <el-table
        :data="pcanxxDataList"
        style="width: 100%"
        v-loading="loadingPcanxx"
        :header-cell-style="{ background: '#f2f9fe' }"
        empty-text="暂无查看权限"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="casenumber"
          label="案号"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="type"
          label="破产类型"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          prop="acceptancecourt"
          label="受理法院"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="closingmethod"
          label="结案方式"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="closingtime"
          label="结案时间"
          align="center"
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getAjqsInfo } from '@/api/portay'
export default {
  props: ['comInfo'],
  data() {
    return {
      activeIndex: 'a',
      list: [
        { text: '案件分析', num: 'a', disabled: false },
        { text: '法院公告信息', disabled: false },
        { text: '开庭公告信息', disabled: false },
        { text: '裁判文书信息', disabled: false },
        { text: '失信被执行人信息', disabled: false },
        { text: '行政处罚信息', disabled: false },
        { text: '行政强制信息', disabled: false },
        { text: '信用承诺', disabled: false },
        { text: '破产案件信息', disabled: false },
      ],
      loading1: false,
      pagination1: {
        page: 1,
        total: 0,
      },
      judicativePaperList: [],
      judicativePaperMoreList: [],
      loading2: false,
      pagination2: {
        page: 1,
        total: 0,
      },
      performedList: [],
      performedMoreList: [],
      loading3: false,
      pagination3: {
        page: 1,
        total: 0,
      },
      dishonestyList: [],
      dishonestyMoreList: [],
      loading4: false,
      pagination4: {
        page: 1,
        total: 0,
      },
      administrativePenaltyList: [],
      administrativePenaltyMoreList: [],

      loading5: false,
      pagination5: {
        page: 1,
        total: 0,
      },
      disciplineList: [],
      disciplineMoreList: [],
      loading6: false,
      pagination6: {
        page: 1,
        total: 0,
      },
      publicityList: [],
      publicityMoreList: [],
      loading7: false,
      pagination7: {
        page: 1,
        total: 0,
      },
      customsCertificationList: [],
      customsCertificationMoreList: [],
      loading8: false,
      pagination8: {
        page: 1,
        total: 0,
      },
      entryExitList: [],
      entryExitMoreList: [],
      loading9: false,
      pagination9: {
        page: 1,
        total: 0,
      },
      qualityPromiseList: [],
      qualityPromiseMoreList: [],
      loading10: false,
      pagination10: {
        page: 1,
        total: 0,
      },
      courtList: [],
      courtMoreList: [],
      courtLoading: false,
      courtPagination: {
        page: 1,
        total: 0,
      },
      openList: [],
      openMoreList: [],
      openLoading: false,
      openPagination: {
        page: 1,
        total: 0,
      },
      misconductList: [],
      misconductMoreList: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      dialogVisible7: false,
      dialogVisible8: false,
      dialogVisible9: false,
      dialogVisible10: false,
      courtDialogVisible: false,
      openDialogVisible: false,
      dialogVisibleXycn: false, //信用承诺
      loadingXycn: false,
      xycnDataList: [],
      xycnDataMoreList: [],
      paginationXycn: { page: 1, total: 0 },
      pcanxxDataList: [], //破产案件信息
      loadingPcanxx: false,
      dialogVisiblePcajxx: false,
      pcajxxDataMoreList: [],
      paginationpcajxx: { page: 1, total: 0 },
    }
  },
  created() {},
  watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
          this.getAjqsInfo()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getDict()
  },
  methods: {
    async getDict() {
      const dataSQQD = await this.$store.dispatch('asyncApi/getDict', {
        code: 'zxgslxr',
      })
      this.open(dataSQQD[0].value)
    },
    open(e) {
      this.$alert(
        `您当前暂无相关内容查看权限，\n如需开通权限请及时联系淄博征信有限公司:${e}`,
        '提示',
        {
          confirmButtonText: '关闭',
          center: true,
          dangerouslyUseHTMLString: true,
          callback: (action) => {},
        }
      )
    },
    //获取案件趋势数据
    getAjqsInfo() {
      getAjqsInfo().then((res) => {
        let xData = []
        let data = []
        res.data.length > 0
          ? res.data.forEach((item) => {
              xData.push()
              data.push()
            })
          : ''
        this.$nextTick(() => {
          this.getCaseTrend(xData, data)
        })
      })
    },
    //案件趋势
    getCaseTrend(xData, data) {
      if (false) {
        let chartDom = document.getElementById('trend')
        let myChart1 = echarts.init(chartDom)
        let option
        option = {
          title: {
            text: '案件趋势（单位：件）',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            },
          },
          color: ['#73a0fa'],
          legend: {
            show: false,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: xData,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: data,
              type: 'bar',
              barWidth: 30,
            },
          ],
        }
        option && myChart1.setOption(option)
        window.addEventListener('resize', () => {
          myChart1.resize()
        })
      } else {
        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 15vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无查看权限</span></div>`
        document.getElementById('trend').innerHTML = html
        document.getElementById('trend').removeAttribute('_echarts_instance_')
      }
    },
    // 点击导航栏，滚动条移动到内容所对应的位置
    goAssignBlock(el, speed, index) {
      this.activeIndex = index
      let windowH = window.innerHeight //浏览器窗口高度
      let h = this.$refs[el].offsetHeight //模块内容高度

      let t = this.$refs[el].offsetTop //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2 //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop //滚动条距离顶部高度
      let currentTop = scrollTop //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId
      //采用requestAnimationFrame，平滑动画
      function step() {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向下滚动
          currentTop += speed
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed)
            requestId = window.requestAnimationFrame(step)
          } else {
            window.cancelAnimationFrame(requestId)
          }
          //向上滚动
          currentTop -= speed
        }
      }
      window.requestAnimationFrame(step)
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.containter {
  width: 100%;
  .step {
    ol.titt {
      // height: 520px;
      // height: 240px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin: 0;
      padding: 0;
      font-size: 14px;
      position: fixed;
      top: 350px;
      right: 24px;
      z-index: 999;
    }
    .tittItem {
      margin-bottom: 10px;
    }
    ol.titt .button {
      width: 150px;
      margin: 0;
    }
    ol.titt .button.cur {
      background-color: #5591f5;
      color: #fff;
    }
  }
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    #trend {
      width: 1400px;
      height: 400px;
      border-radius: 4px;
      padding: 12px;
      box-shadow: 0 0 10px #e8eaef;
    }
  }
}
.morexxfp {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  div {
    margin-right: 24px;
  }
}
.title {
  font-size: 18px;
  font-weight: 900;
}
.glqy {
  color: #ccc;
  margin-left: 24px;
}
.glqy:hover {
  cursor: pointer;
}
.item {
  margin-top: 4px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 50px;
}
.el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 200px);
  max-width: calc(100% - 30px);
}
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.pagination {
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>